<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

<!-- 总_开始-->
<div class="all">
<!-- 头部开始 -->

<div class="page_top">
        <div class="text_top">微信</div>
        <div class="top_right">
            <img src="../img/chazhao.png" width="20">
            <img src="../img/tianjia.png" width="20">
        </div> 

</div>
<!-- 头部结束 -->


<!-- 中间部分开始 -->
<div class="all_center">
    
    <!-- 第一个开始 -->
    <div id = "page_list" class="page_list">
        <div class="userinfo">

            <!-- 头像开始 -->
            <div class="userpic">
        <a href="dialog.html">      <img src="../img/yang.jpg" width="40px" /></a>  
            </div>
            <!-- 头像结束 -->

            <div class="otherinfo">
                <!-- 名字/内容开始 -->
                <div class="my_info">
                    <div class="nickname">   &nbsp   哈哈哈</div>
                    <div class="wechat">&nbsp 这里是聊天内容！！！！</div>
                </div>
                <!-- 名字/内容结束 -->
                
                <div class="time"> 晚上8：29 </div>
                       
                   
                
            </div>
                   
        </div>
    </div>
    <!-- 第一个结束 -->
    <div class="line">
     </div>    
<!-- 
    <!-- 第2个开始 -->

    <div id = "page_list" class="page_list">
        <div class="userinfo">

            <!-- 头像开始 -->
            <div class="userpic">
                <img src="../img/aa.jpg" width="40px" />
            </div>
            <!-- 头像结束 -->

            <div class="otherinfo">
                <!-- 名字/内容开始 -->
                <div class="my_info">
                    <div class="nickname">   &nbsp   哈哈哈</div>
                    <div class="wechat">&nbsp 这里是聊天内容！！！！</div>
                </div>
                <!-- 名字/内容结束 -->
                
                <div class="time"> 晚上8：29 </div>
                       
                   
                
            </div>
        </div>
    </div>
    <!-- 第2个结束 --> -->
    <div class="line">
     </div>              
    
    <!-- 第4个开始 -->
<div id = "page_list" class="page_list">
        <div class="userinfo">

            <!-- 头像开始 -->
            <div class="userpic">
                <img src="../img/bb.jpg" width="40px" />
            </div>
            <!-- 头像结束 -->

            <div class="otherinfo">
                <!-- 名字/内容开始 -->
                <div class="my_info">
                    <div class="nickname">   &nbsp   巢湖学院图书馆</div>
                    <div class="wechat">&nbsp 2021，全糖去冰</div>
                </div>
                <!-- 名字/内容结束 -->
                
                <div class="time"> 晚上7：29 </div>
                       
                   
                
            </div>
        </div>
    </div>
    <!-- 第4个结束 -->
    <div class="line">
     </div>    
    <!-- 第5个开始 -->
    <div id = "page_list" class="page_list">
        <div class="userinfo">

            <!-- 头像开始 -->
            <div class="userpic">
                <img src="../img/weixinxin.png" width="40px" />
            </div>
            <!-- 头像结束 -->

            <div class="otherinfo">
                <!-- 名字/内容开始 -->
                <div class="my_info">
                    <div class="nickname">   &nbsp   微信运动</div>
                    <div class="wechat">&nbsp [应用消息]</div>
                </div>
                <!-- 名字/内容结束 -->
                
                <div class="time"> 下午6：59 </div>
                       
                   
                
            </div>
        </div>
    </div>
    <!-- 第5个结束 -->
    <div class="line">
     </div>    
    <!-- 第6个开始 -->
    <div id = "page_list" class="page_list">
        <div class="userinfo">

            <!-- 头像开始 -->
            <div class="userpic">
                <img src="../img/gzh.png" width="40px" />
            </div>
            <!-- 头像结束 -->

            <div class="otherinfo">
                <!-- 名字/内容开始 -->
                <div class="my_info">
                    <div class="nickname">   &nbsp   订阅号消息</div>
                    <div class="wechat">&nbsp 考完研后，再也提不起劲去学习，怎么办？</div>
                </div>
                <!-- 名字/内容结束 -->
                
                <div class="time"> 下午6：08 </div>
                       
                   
                
            </div>
        </div>
    </div>
    <!-- 第6个结束 -->
    <div class="line">
     </div>    
    <!-- 第7个开始 -->
    <div id = "page_list" class="page_list">
        <div class="userinfo">

            <!-- 头像开始 -->
            <div class="userpic">
                <img src="../img/cc.png" width="40px" />
            </div>
            <!-- 头像结束 -->

            <div class="otherinfo">
                <!-- 名字/内容开始 -->
                <div class="my_info">
                    <div class="nickname">   &nbsp   旺仔</div>
                    <div class="wechat">&nbsp 你旺我旺大家旺！！！！！</div>
                </div>
                <!-- 名字/内容结束 -->
                
                <div class="time"> 下午4：29 </div>
                       
                   
                
            </div>
        </div>
    </div>
    <!-- 第7个结束 -->
    <div class="line">
     </div>    
    <!-- 第8个开始 -->
    <div id = "page_list" class="page_list">
        <div class="userinfo">

            <!-- 头像开始 -->
            <div class="userpic">
                <img src="../img/dlrb.jpg" width="40px" />
            </div>
            <!-- 头像结束 -->

            <div class="otherinfo">
                <!-- 名字/内容开始 -->
                <div class="my_info">
                    <div class="nickname">   &nbsp   迪丽热巴</div>
                    <div class="wechat">&nbsp 你好，我是迪丽热巴，很高兴认识你！！！</div>
                </div>
                <!-- 名字/内容结束 -->
                
                <div class="time"> 下午4：29 </div>
                       
                   
                
            </div>
        </div>
    </div>
    <!-- 第8个结束 -->
    <div class="line">
     </div>    
    <!-- 第9个开始 -->
    <div id = "page_list" class="page_list">
        <div class="userinfo">

            <!-- 头像开始 -->
            <div class="userpic">
                <img src="../img/u=3387716082,1768697998&fm=26&gp=0.jpg" width="40px" />
            </div>
            <!-- 头像结束 -->

            <div class="otherinfo">
                <!-- 名字/内容开始 -->
                <div class="my_info">
                    <div class="nickname">   &nbsp   哈哈哈</div>
                    <div class="wechat">&nbsp 这里是聊天内容！！！！</div>
                </div>
                <!-- 名字/内容结束 -->
                
                <div class="time"> 下午4：29 </div>
                       
                   
                
            </div>
        </div>
    </div>
    
   
    
</div>    
<!-- 中间页面结束 -->



<!-- 底部开始 -->
<div class="tabbar">
        <div class="tab">
            <img src="../img/weixinxin.png" width="28" />
            <div class="txt">微信</div>
            <div class="notice"></div>
        </div>
        <div class="tab">
          <a href="微信通讯录页面.html"> <img src="../img/tongxunlu.png" width="28" /></a>
            <div class="txt">通讯录</div>
        </div>
        <div class="tab">
        <a href="panyan.html">  <img src="../img/faxianxian.png" width="28" /></a> 
            <div class="txt">发现</div>
        </div>
        <div class="tab">
         <a href="My.html">   <img src="../img/wowo.png" width="28" /></a>
            <div class="txt">我</div>
        </div>
    </div>
<!-- 底部结束 -->



</div>
<!-- 总_结束 -->





<style type="text/css">
    .line{
        width: 96%;
        height: 1px;
        background: #efefef;
        right: 0px;
        text-align: right;
        margin-left: 4%;


        
    }


    .all{
        height: 100%;
    }
    .all_center{
        height: 86%;

    }
  

    .wechat{
        padding: 5px;
        font-size: 10px;
        color: #CDC9C9;
    }
    .nickname{
        padding: 2px;
        font-size: 15px;
        font-weight: bold;
    }

    .page_list{
        width: 100%;
        padding: 5px;
      /*  background: #efefaa;*/
    }

    .otherinfo{
        display: flex;
        padding: 5px;
        width: 100%;
    }
    .my_info{
        width: 92%;
    }

    .time{
        width: 30%;
        /*background: red;*/
        text-align: center;
        color: #CDC9C9;
        align-items: center;
        height: 40px;
        line-height: 40px;
    }
    
    .tab{ 
        padding-bottom:5px;
        width:25%;
        font-size:12px;
        text-align: center;
        position:relative
    }
    .tabbar .txt{
        margin-top:2px;
    }
    .tabbar{
        position:fixed;
        width:100%;
        left:0px;
        bottom:0px;
        display:flex;
        background:white;
        padding-top:5px;
    }
    
    .page_top{
        background: white;
        /*position: fixed;*/
        top: 0px;
        height: 5%;
        width: 100%;
        display: flex;
    }
    .text_top{
        font-size: 20px;
        font-weight: bold;
        width: 75%
    }

    .top_right{
       /* background: red;*/
        display: flex;
        width:8%;
    }
    .top_right img{
        margin-left:65%;

        text-align: right;
    }
    .userinfo{
        display: flex;
    }
    .page_top{
       /* background: pink;*/
    }
    *{
        margin:0px;
        padding:0px;
    }


</style>